var CustomMenu;

$(document).ready(function () {
    CustomMenu = new Vue({
        el: '#setCustomMenu',
        data: {
            parentMenuName:'',
            menuInfo: [],
            clickState: '',
            viewUrl : "",
            menuContentList: [
                {
                    name: "发送消息",
                    type : "click",
                    clickState: "this-current"
                }, {
                    name: "跳转页面",
                    type : "view",
                    clickState: ""
                }, {
                    name: "事件",
                    type : "event",
                    clickState: ""
                }, {
                    name: "推广",
                    type : "extension",
                    clickState: ""
                }
            ], 
            isCallService:[
                {
                    name:'无动作',
                    status:1,
                    value:'',
                },
                {
                    name:'呼叫客服',
                    status:0,
                    value:'V1001_CALL_SERVICE',
                }
            ],
            ReplyType:[
                {
                    name:"图文消息",
                    status:'this-msg',
                    type:'view_limited',
                },
                {
                    name:"文字消息",
                    status:'',
                    type:'text',
                },
                {
                    name:"图片消息",
                    status:'',
                    type:'media_id',
                },
                {
                    name:"语音消息",
                    status:'',
                    type:'media_id',
                },
                {
                    name:"视频消息",
                    status:'',
                    type:'media_id',
                },
                {
                    name:"模板消息",
                    status:'',
                    type:'media_id',
                },
                {
                    name:"卡片素材",
                    status:'',
                    type:'media_id',
                },
            ],
            changeSucai:[
                {
                    name:"图文",
                },
                {
                    name:"文本",
                },
                {
                    name:"图片",
                },
                {
                    name:"语音",
                },
                {
                    name:"视频",
                },
                {
                    name:"模板",
                },
                {
                    name:"卡片",
                },

            ],
            menuList:
                {
                    "button": [
                        {
                            "name": "添加菜单",
                        },
                        {
                            "name": "添加菜单",
                        },
                        {
                            "name": "添加菜单",
                        },
                    ],
                },
            menuData:                
            {
                "button": [],
            },
            addListStatus:[true,true,true],
            menuListStatus:[false,false,false],
            currentMenu:{
                index:"",
                index_s:"",
                item:"",
                editContent : '',
            },
            content: 0,
            currentSucai:'',
            replyText : false,
        },
        created: function(){
            var that = this;
            that.currentMenu.item = that.menuList.button[0];
            that.currentMenu.index = 0;
            that.currentSucai = that.changeSucai[0].name;
            that.menuListStatus = [true,false,false];
            console.log(that.menuList);
        },
        methods: {
            customType: function (index,data) {
                var that = this;
                console.log(that.menuList);
                that.menuContentList.forEach(function (item) {
                    item.clickState = '';
                })
                if(data.index_s !== ""){
                    that.menuList.button[data.index].sub_button[data.index_s].type = this.menuContentList[index].type;
                    if(this.menuContentList[index].type == 'view'){
                        that.menuList.button[data.index].sub_button[data.index_s].url = this.viewUrl;
                    }
                }else{
                    that.menuList.button[data.index].type = this.menuContentList[index].type;
                    if(this.menuContentList[index].type == 'view'){
                        that.menuList.button[data.index].url = this.viewUrl;
                    }
                }
                console.log(that.menuList.button[data.index]);
                that.menuContentList[index].clickState = "this-current";
                that.content = index;

            },
            setJumpUrl:function(data){
                var that = this;
                if(data.index_s !== ""){
                    // that.menuList.button[data.index].splice //创建子级菜单需要删掉父级菜单的状态
                    that.menuList.button[data.index].sub_button[data.index_s].type = 'view';
                    that.menuList.button[data.index].sub_button[data.index_s].url = this.viewUrl;
                }else{
                    that.menuList.button[data.index].type = 'view'
                    that.menuList.button[data.index].url = this.viewUrl;
                    
                }
                console.log(that.menuList.button[data.index]);
            },
            parentButton:function(items,index){
                var that = this;
                var current = '';
                var currentType = '';
                that.menuListStatus = [false,false,false];
                that.menuListStatus[index] = true;
                that.currentMenu.index = index;
                that.currentMenu.item = items;
                that.currentMenu.index_s = "";
                that.parentMenuName = items.name;
                that.viewUrl = items.url;

                if(items.text){
                    that.currentMenu.editContent = items.text;
                }else{
                    that.currentMenu.editContent = '';
                }

                this.ReplyType.forEach(function (item2 , idx2) {
                    item2.status = '';
                    if(items.key == item2.type){
                        currentType = idx2;
                    }
                    
                })

                if(currentType != ''){
                    if(currentType == 1){
                        this.replyText = true;
                    }else{
                        this.replyText = false;
                    }
                    this.ReplyType[currentType].status = 'this-msg';
                }else{
                    this.ReplyType[0].status = 'this-msg';
                    this.replyText = false;                    
                }
                
                that.menuContentList.forEach(function(item,idx){
                    item.clickState = '';
                    if(item.type == items.type){
                        current = idx;
                    }
                });

                if(current != ''){
                    that.menuContentList[current].clickState = "this-current";
                    that.content = current;
                }else{
                    that.menuContentList[0].clickState = "this-current";
                    that.content = 0;
                }

                // console.log(that.currentMenu);
                // console.log(that.menuContentList);
                console.log(items)
                console.log(items.text)
            },
            addSonButton:function(index){
                var that = this;
                var newArray = {"name": "添加子菜单"};
                if(that.menuList.button[index].sub_button == undefined){
                    that.menuList.button[index].sub_button = [{"name": "添加子菜单"}];
                    
                }else if(that.menuList.button[index].sub_button.length < 5){
                    that.menuList.button[index].sub_button.push(newArray);
                    if(that.menuList.button[index].sub_button.length == 5){
                        that.addListStatus[index] = false;
                    }
                }
                that.menuData.button[index] = that.menuList.button[index];
                console.log(that.menuData);
                that.currentMenu.item = newArray;
                that.currentMenu.index = index;
                that.currentMenu.index_s = that.menuList.button[index].sub_button.length;
                that.$forceUpdate();
            },
            setSonButton:function(index,index_s,items_s){
                var that = this;
                that.currentMenu.item = items_s;
                that.currentMenu.index = index;
                that.currentMenu.index_s = index_s;
                that.parentMenuName = items_s.name;
            },
            menuName:function(data){
                var that = this;
                if(data.index_s !== ""){
                    that.menuList.button[data.index].sub_button[data.index_s].name = this.parentMenuName;
                }else{
                    that.menuList.button[data.index].name = this.parentMenuName;
                }
                that.menuData.button[data.index] = that.menuList.button[data.index];
                console.log(that.menuData);
            },
            submitData:function(){
                createMenu(this.menuData);
            },
            changeReplyType:function(index){
                var that = this;
                console.log(this.currentMenu);
                this.ReplyType.forEach(function (item) {
                    item.status = ''
                })
                this.ReplyType[index].status = 'this-msg';
                if(index == 1){
                    this.replyText = true;
                    if(this.currentMenu.index_s !== ""){
                        that.menuList.button[this.currentMenu.index].sub_button[this.currentMenu.index_s].type = this.ReplyType[index].type;
                    }else{
                        that.menuList.button[this.currentMenu.index].type = this.ReplyType[index].type;
                    }
                    that.menuData.button[this.currentMenu.index] = that.menuList.button[this.currentMenu.index];
                    console.log(that.menuData);
                }else{
                    this.replyText = false;
                    this.currentSucai = this.changeSucai[index].name;
                }
            },

            callService:function(data,currentMenu){
                var that = this;
                if(data == 'V1001_CALL_SERVICE'){
                    if(currentMenu.index_s !== ""){
                        // that.menuList.button[currentMenu.index].splift //创建子级菜单需要删掉父级菜单的状态
                        that.menuList.button[currentMenu.index].sub_button[currentMenu.index_s].type = 'click';
                        that.menuList.button[currentMenu.index].sub_button[currentMenu.index_s].key = data;
                    } else {
                        that.menuList.button[currentMenu.index].type = 'click'
                        that.menuList.button[currentMenu.index].key = data;
                    }
                    that.menuData.button[currentMenu.index] = that.menuList.button[currentMenu.index];
                }else{
                    //清除呼叫客服状态
                }
            },
            addtext:function(){
                var that = this;
                var currentMenu = this.currentMenu;
                if(currentMenu.index_s !== ""){
                    // that.menuList.button[currentMenu.index].splift //创建子级菜单需要删掉父级菜单的状态
                    that.menuList.button[currentMenu.index].sub_button[currentMenu.index_s].value = currentMenu.editContent;
                } else {
                    that.menuList.button[currentMenu.index].value = currentMenu.editContent;
                }
                that.menuData.button[currentMenu.index] = that.menuList.button[currentMenu.index];
                console.log(that.menuData)
            }
        },
    });
});